<template>
    <div>           
        <el-container class="home-container">
            <!-- 头部区域 -->
            <el-header>
                <div>
                    <img src="../assets/logo.png" alt="">
                    <span>电商后台管理系统</span>
                </div>
                <el-button type="primary" @click="loginOut">退出程序</el-button>
            </el-header>
            <!-- 页面主体区域 -->
            <el-container>
                <!-- 侧边导航 -->
                <el-aside :width="isCollapse ? '64px': '200px'">
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    <el-menu                        
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409EFF"
                        unique-opened
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        :router="true"
                        :default-active="activePath"
                    >
                        <!-- 一级菜单 -->
                        <el-submenu 
                            v-for="item in menulist" 
                            :key="item.id" 
                            :index="item.id + ''"
                        >
                            <!-- 一级菜单模板区域 -->
                            <template slot="title">
                                <i :class="iconsobj[item.id]"></i>
                                <span>{{ item.authName }}</span>
                            </template>      

                            <!-- 
                                二级菜单:
                                :index="'/'+itemC.path"  ：设置每一个二级菜单的路由，当点击当前路由时，路径会根据其点击的二级菜单匹配路径，此处加不加 / 都好像没有影响，好像浏览器会自动添加 /
                            -->
                            <el-menu-item 
                                v-for="itemC in item.children"
                                :key="itemC.id"
                                :index="'/' + itemC.path"
                                @click="saveNavState('/' + itemC.path)"
                            >
                                <!-- 二级菜单模板区域 -->
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{ itemC.authName }}</span>
                                </template>  
                            </el-menu-item>
                        </el-submenu>


                        <!--占位导航 -->
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">占位导航</span>
                        </el-menu-item>                        
                    </el-menu>
                </el-aside>
                
                
                <!-- 右侧主体区 -->
                <el-main>
                    <!-- 欢迎页面的占位符号 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 侧边菜单数据
            menulist: [],
            // 字体图标数据,
            iconsobj: {
                '125': 'iconfont icon-users',
                '103': 'iconfont icon-lock_fill',
                '101': 'iconfont icon-shangpin',
                '102': 'iconfont icon-danju',
                '145': 'iconfont icon-baobiao',
            },
            // 是否折叠属性
            isCollapse: false,
            // 设置动态的 default-active 关联的值, 本地被激活的连接地址，此处设置初始状态为空
            activePath: ''
        }
    },    
    created() {
        this.getMenuList()  // API请求
        this.activePath = window.localStorage.getItem('activePath')
    },
    methods: {

        // 退出功能
        loginOut() {            
            // 清空 token
            window.sessionStorage.clear()
            // 跳转到登录页
            this.$router.push('/login')
            this.$message({ type: 'warning', message: '请登录信息' })
        },

        // API请求：获取侧边栏所有菜单
        async getMenuList() {
            const { data: res } = await this.$http.get('menus')
            // console.log("侧边菜单", res)  //ceshi

            if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
            this.menulist = res.data

            
            // console.log("数据列表", this.menulist)  //ceshi
        },

        // 折叠按钮
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        },

        // 保存二级菜单的激活状态，也就是与 default-active 关联，动态改变其值
        saveNavState(activePath) {
            window.localStorage.setItem('activePath', activePath)
            this.activePath = activePath
        }
    }
}
</script>

<style lang="less" scoped>
.home-container {
    position: fixed;  //设置固定布局以便于下方 height:100% 属性生效
    height: 100%;
    width: 100%;
    overflow-y: auto; /* 显示垂直滚动条：主要注意的是此步骤很关键，若是不设置此步骤，将会被设定死高度，也就是页面的可视高度，若是其中子组件很长，并且超出该区域，就不会展示，应为没有设置超出后的滚动调 */
}
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;    
    > div {     // 设置div 的样式  
        display: flex;
        align-items: center;
    }
    img {
        width: 70px;
    }    
}
.el-aside {
    background-color: #333744;
    .el-menu {
        border-right: none;
    }
}
.el-main {
    background-color: #eaedf1;
}
.iconfont {
    margin-right: 10px;
}
.toggle-button {
    background-color: #4a5064;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
</style>